<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			
			img{
				display: block;
				/*vertical-align: middle;*/
			}
			
			a{
				text-decoration: none;
			}
			
			input{
				outline: none;
			}
			
			.clearFix:after{
				content: '';
				display: table;
				clear: both;
			}
			
			#box{
				position: relative;
				width: 600px;
				height: 300px;
				margin: 50px auto;
				overflow: hidden;
			}
			
			#box .list{
				position: absolute;
				width: 3000px;
				height: 300px;
			}
			
			#box .list li{
				float: left;
				width: 600px;
				height: 300px;
			}
			
			#box .list li img{
				width: 600px;
				height: 300px;
			}
			
			
			#box span{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 50px;
				height: 100px;
				background-color: rgba(200,200,200,.7);
				font-size: 50px;
				text-align: center;
				line-height: 100px;
				color: white;
				opacity: 0;
				transition: opacity 2s;
			}
			#box .left{
				left: 0;
			}
			#box .right{
				right: 0;
			}
			
			#box .iconList{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 10px;
				overflow: hidden;
			}
			
			#box .iconList li{
				float: left;
				width: 40px;
				height: 40px;
				margin-right: 10px;
				border-radius: 50%;
				background-color: gray;
			}
			
			#box .iconList li.current{
				background-color: red;
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="list">
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
			</ul>
			
			<span class="left">  <  </span>
			<span class="right">  >  </span>
			
			
			<ul class="iconList">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			// （0）移入展示左右按钮
			// #region
			var box = document.querySelector('#box');
            var span_list = document.querySelectorAll('span');
            box.onmouseover = function(){
                span_list[0].style.opacity = .8;
                span_list[1].style.opacity = .8;
            }
            box.onmouseout = function(){
                span_list[0].style.opacity = 0;
                span_list[1].style.opacity = 0;
            }
			// #endregion

			// 需求：
			var list = document.querySelector('.list');
			// （1）右侧瞬变
			span_list[1].onclick = function(){
				var startX = list.offsetLeft;
				var step = -600;
				var endX = startX + step;
				list.style.left = endX + 'px'
			}

			// （2）左侧瞬变
			span_list[0].onclick = function(){
				var startX = list.offsetLeft;
				var step = 600;
				var endX = startX + step;
				list.style.left = endX + 'px';
			}
			// （3）瞬变的封装
			// （4）右侧渐变
			// （5）左侧渐变
			// （6）渐变的封装
			// （7）无限轮播
			// （8）图片联动小圆点
			// （9）小圆点联动图片
			// （10）自动轮播
			// （11）移入悬停 移出继续
			// （12）定时器叠加
		</script>
	</body>
</html>